<template>
  <uni-nav-bar title="预约订单" color="#333" left-icon="left" @clickLeft="navBack" statusBar fixed></uni-nav-bar>
  <environment></environment>
  <view class="datas">
    <uni-datetime-picker
      v-model="range"
      type="daterange"
      :border="false"
      :clear-icon="false"
      rangeSeparator="至"
      @change="change"
    />
  </view>
  <!-- empty placeholder -->
  <view v-if="list.length === 0" class="flex-col-hcenter" style="margin-top: 160rpx">
    <image
      :src="Empty"
      style="width: 384rpx; height: 312rpx"
    ></image>
    <view style="font-size: 26rpx; color: #999; margin-top: 34rpx">暂无预约记录</view>
  </view>
  <!-- list -->
  <view class="flex-col-hcenter" style="margin-top: 15rpx">
    <view v-for="(item, index) in list" :key="index" class="card">
      <view class="status-bar">{{ item.status_text }}</view>
      <view class="detail-box">
        <view class="talj">订单号</view>
        <view class="tar">
          <text class="copy-btn" @click="copyText(item.order_sn)">复制</text>
          <text>{{ item.order_sn }}</text>
        </view>
        <view class="talj">时间</view>
        <view class="tar">{{ item.time }}</view>
        <view class="talj">加注方式</view>
        <view class="tar">{{ item.type === 'store' ? '进站加注' : '配送到车' }}</view>
		<view class="talj">姓名</view>
		<view class="tar">{{ item.driver_name }}</view>
		<view class="talj">电话</view>
		<view class="tar" @click="item.driver_mobile?telCall(item.driver_mobile):''">
		<uni-icons type="phone" color="#3da1ff"></uni-icons>
		<text style="color: #3da1ff;margin-left: 10rpx;">{{item.driver_mobile}}</text>
		</view>
        <view class="talj">地址</view>
        <view class="flex-jcfe">
          <text style="word-break: break-all;text-align: right;">{{ item.address }}</text>
        </view>
        
        <view class="talj">加注量</view>
        <view class="tar">{{ item.amount }}公斤</view>
      <!--  <view class="talj">车牌号</view>
        <view class="tar">{{ item.cart_code }}</view> -->
		<view  class="talj">联系我们</view>
		 <view class="tar" @click="item.tel?telCall(item.tel):''">
		   <!-- <text style="margin-right: 8rpx">{{ item.store_name }}</text> -->
		   <uni-icons type="phone" color="#3da1ff"></uni-icons>
		   <text style="color: #3da1ff;margin-left: 10rpx;">{{item.tel}}</text>
		 </view>
        <view class="talj" v-if="item.shop_goods_name">福利</view>
        <view class="tar" v-if="item.shop_goods_name">{{ item.shop_goods_name }}</view>
        <view class="talj">留言</view>
        <view class="flex-jcfe">
          <text style="word-break: break-all;text-align: right;">{{ item.des }}</text>
        </view>
      </view>
      <view
        v-if="!(item.is_hexiao == '1' || item.status == '3' || item.status == '2')"
        class="flex-jcfe"
        style="padding: 0 30rpx 30rpx"
      >
        <view class="flex-center btn" @click="cancel(item.id)">取消预约</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import environment from '@c/pobulic/environment.vue';
import { appointmentList } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { Empty } from '@/utils/Static';
import { copyText,telCall } from '@/utils/copyText';
import { navBack } from '@/utils/navigator';
import { errorToast, showLoading, showToast } from '@/utils/prompt';
import { onReachBottom } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { ref } from 'vue';

import { format, subDays } from 'date-fns';

const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);
// static
const driver_id = getDriverID();
const list = ref([]);
// data
const isReady = ref(false);
let page = 1;
let lastpage = 1;
const repeat = ref(true); //放重复点击

getList(reloadList);

onReachBottom(toLoadmore);

function getList(callback: (obj: any) => void) {
  const payload = {
    query: appointmentList,
    variables: {
      driver_id,
      page,
      start,
      end,
    },
  };
  toPublish('ql/driver/getSubscribeList', payload, (obj: any) => {
    if (!isReady.value) {
      isReady.value = true;
    }
    callback(obj);
  });
}

function reloadList({ data }) {
  const { sub_order_list } = data;
  list.value = sub_order_list.list;
  page = 1;
  lastpage = sub_order_list.lastpage;
}

function loadmore({ data }) {
  const { sub_order_list } = data;
  list.value.push(...sub_order_list.list);
}
/**
 * 时间筛选
 */
function change([sta, en]) {
  page = 1;
  list.value = [];
  start = sta;
  end = en;
  getList(reloadList);
}

function toLoadmore() {
  if (page < lastpage) {
    page += 1;
    getList(loadmore);
  }
}

function cancel(order_id: number) {
  showLoading('取消中');
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    driver_id,
    order_id,
    order_type: 'subscribe',
  };
  toPublish('order_subscribe/cancelOrder', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true;
      showToast('取消成功');
      getList(reloadList);
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}
</script>

<style scoped lang="less">
.datas {
  width: 96%;
  margin: 15rpx auto;
  height: 80rpx;
  background: #ffffff;
  box-shadow: 2px 4px 8px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 20rpx;
  box-sizing: border-box;
  text {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
  }
  text:nth-of-type(2) {
    margin: 0px 10rpx;
  }
}
.card {
  margin-bottom: 15rpx;
  width: 720rpx;
  background: white;
  border-radius: 5px;
  box-shadow: 0rpx 2rpx 23rpx 1rpx rgba(204, 204, 204, 0.3);
  color: #333;
}

.status-bar {
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
  font-size: 32rpx;
}

.detail-box {
  padding: 20rpx;
  display: grid;
  grid-template-columns: 22% 74%;
  gap: 30rpx 4%;
}

.copy-btn {
  display: inline-block;
  width: 70rpx;
  padding: 3rpx 0px;
  box-sizing: border-box;
  font-size: 26rpx;
  vertical-align: top;
  margin-top: 4rpx;
  background-color: #c4c4c4;
  color: white;
  border-radius: 5px;
  text-align: center;
  margin-right: 18rpx;
}

.btn {
  width: 200rpx;
  height: 80rpx;
  background: #e3e3e3;
  border-radius: 5px;
  font-size: 32rpx;
}
.talj {
  font-size: 32rpx;
}
.tar {
  font-size: 32rpx;
}
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
